<template>
	<view class="content">
		<!-- 顶部登录 -->
		<button class="login-box clear-box" open-type="getUserInfo" @getuserinfo="bindGetUserInfo" hover-class="none">
			<view class="login-box2">
				<view>
					<image class="avatar-img" :src="canIUse?userInfo.avatarUrl:''" mode=""></image>
				</view>
				<view>
					<view class="login-font1">{{canIUse?userInfo.nickName:"马上登录"}}</view>
					<view v-if="canIUse" class="login-font2">
						{{userInfo.company&&!userInfo.job?userInfo.company:''}}
						{{userInfo.company&&userInfo.job?userInfo.company +'-'+ userInfo.job:''}}
						{{!userInfo.company&&!userInfo.job&&userInfo.school?userInfo.school:''}}
						{{!userInfo.company&&!userInfo.job&&!userInfo.school?'暂无信息':''}}
					</view>
					<view v-else class="login-font2">
						点击登录，让职场走的更远
					</view>
				</view>
			</view>
			<view>
				<image class="right-arrow" src="../../static/personal/arrow.png" mode=""></image>
			</view>
		</button>

		<!-- 轮播图 -->
		<swiper>
			<swiper-item v-for="(item,index) in bannerList" :key="index">
				<view class="swiper-item">
					<image :src="item.imgUrl" mode="scaleToFill"></image>
				</view>
			</swiper-item>
		</swiper>

		<block v-for="(item,index) in abilities" :key="index">
			<navigator v-if="item.text!='联系客服'" :url="item.url" class="list-item clear-box" hover-class="none">
				<view>
					<image class="flag-img" :src="item.icon" mode=""></image>
				</view>
				<view>
					{{item.text}}
				</view>
				<view>
					<image class="right-arrow" src="../../static/personal/arrow.png" mode=""></image>
				</view>
			</navigator>

			<button v-else type="default" class="list-item clear-box" open-type="contact" hover-class="none">
				<view>
					<image class="flag-img" :src="item.icon" mode=""></image>
				</view>
				<view>
					{{item.text}}
				</view>
				<view>
					<image class="right-arrow" src="../../static/personal/arrow.png" mode=""></image>
				</view>
			</button>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canIUse: 0, //小程序是否已经授权
				userInfo: {},
				bannerList: [],
				abilities: [{
						icon: "../../static/personal/bcmp.png",
						text: "北窗名片",
						url: "/pages/job/job"
					},
					{
						icon: "../../static/personal/wdfb.png",
						text: "我的发布",
						url: "/pages/personal/myrelease"
					},
					{
						icon: "../../static/personal/wdsc.png",
						text: "我的收藏",
						url: "/pages/personal/myCollection"
					},
					{
						icon: "../../static/personal/tdjl.png",
						text: "投递记录",
						url: "/pages/personal/myDelivery"
					},
					{
						icon: "../../static/personal/ywxg.png",
						text: "与我相关",
						url: "/pages/personal/aboutWe"
					},
					{
						icon: "../../static/personal/lxkf.png",
						text: "联系客服",
						url: ""
					},
					{
						icon: "../../static/personal/yjfk.png",
						text: "意见反馈",
						url: "/pages/personal/feedback"
					}
				]
			};
		},
		onLoad() {
			// 获取轮播图列表
			this.getBannerList()
			// 获取与我相关条数
			this.getMeCount()

			// 根据全局的设置看小程序是否授权过
			this.canIUse = uni.getStorageSync("canIUse")
			this.userInfo = this.canIUse ? uni.getStorageSync("userInfo") : {}
		},
		methods: {

			// 获取用户信息
			bindGetUserInfo() {
				if (this.canIUse) { //授权过跳转到用户详情编辑页面
					uni.navigateTo({
						url: "/pages/personal/editUserInfo"
					});
				} else { //没有授权过，获取用户的信息
					// this.getUserInfo();
				}
			},

			// 获取用户信息并保存到服务器
			getUserInfo() {
				uni.showLoading({
					title: "登录中"
				})
				uni.getUserInfo({
					success: res => {
						let data = {
							encryptedData: res.encryptedData,
							iv: res.iv,
							rawData: res.rawData,
							signature: res.signature
						}
						this.sgAjax.getData("/user/userInfo", data).then(res2 => {
							this.userInfo = res2.data
							this.canIUse = 1
							uni.getStorageSync("userInfo", res2.data)
							uni.setStorageSync("canIUse", 1)
							uni.hideLoading()
						})
					}
				});
			},

			// 获取与我相关条数
			getMeCount() {
				this.sgAjax.getMeCount().then(res => {
					console.log("这里是与我相关的条数", res)
				})
			},

			// 获取轮播图信息
			getBannerList() {
				let data = {
					type: 0
				}
				this.sgAjax.getConfigQueryOnline(data).then(res => {
					this.bannerList = res.data.configList
				})
			}
		}
	};
</script>

<style scoped>
	view,
	button,
	p,
	a {
		font-size: 32rpx;
		color: #040319;
		line-height: 32rpx;
	}

	.login-font1 {
		font-size: 32rpx;
		color: #040319;
		line-height: 32rpx;
		margin-bottom: 16rpx;
		font-weight: bold;
	}

	.login-font2 {
		font-size: 28rpx;
		color: rgba(4, 3, 25, 0.4);
		line-height: 28rpx;
	}

	.content {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.text-sm {
		font-size: 28rpx;
	}

	.login-box {
		padding: 32rpx 0;
	}

	.login-box2 {
		display: flex !important;
		align-items: center !important;
		text-align: left;
	}

	.avatar-img {
		width: 160rpx;
		height: 160rpx;
		background: rgba(85, 83, 127, 0.2);
		border-radius: 8px;
		border-radius: 8px;
		display: block;
		margin-right: 32rpx;
	}

	.right-arrow {
		width: 24rpx;
		height: 48rpx;
	}

	button {
		border: none;
		background: none;
	}

	button::after {
		border: none;
	}

	.login-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.login-box>view {
		display: inline-block;
	}

	.list-item .flag-img {
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
		display: block;
	}

	.list-item>view {
		float: left;
		vertical-align: middle;
	}

	.list-item>view:last-child {
		float: right;
	}

	.clear-box {
		overflow: auto;
	}

	.list-item {
		padding: 39rpx 0 30rpx;
		border-bottom: 1rpx solid rgba(85, 83, 127, 0.1);
	}

	swiper,
	swiper-item,
	swiper-item image {
		height: 180rpx;
		width: 100%;
	}

	swiper {
		margin-bottom: 5rpx;
	}

	swiper-item {
		background-color: #cccccc;
	}

	.right-arrow {
		margin-top: -8rpx;
	}
</style>
